<template>
	<view class="container">
		<view class="search flex align-center">
			<text @click="goSearch" class="search-icon flex align-center cuIcon-search"><text
					style="margin-left: 20rpx;">请输入你想搜索的内容</text></text>
		</view>
		<scroll-view class="scroll" scroll-y :refresher-threshold="50" :refresher-background="'#FDFDFD'"
			:refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="refresherrefresh"
			@scrolltolower="loadMore">
			<!-- 服务商品与服务商tab栏切换 -->
			<view class="tabs flex algin-center">
				<view class="tab-item" :class="current === index?'active_true':'active_false'" @click="tabClick(item,index)"
					v-for="item,index in tabList" :key="index">
					<text>
						{{item.name}}
					</text>
				</view>
			</view>

			<!-- 服务区域、选择服务、综合排序筛选 -->
			<view class="chose-area solid-bottom">
				<view class="chose-type">
					<!-- <chose-region @change1="regionName" @changes1="regionValue">
						<view class="chose-item">
							<text v-if="choseRegion.length > 0" class="title">{{choseRegion[1].name}}</text>
							<text v-else class="title">服务区域</text>
							<text class="icon"></text>
						</view>
					</chose-region> -->
					<view class="chose-item" @click="showAddr">
						<text v-if="addrName" class="title">{{addrName}}</text>
						<text v-else class="title">服务区域</text>
						<text class="icon"></text>
					</view>
					<view class="chose-item" @click="showCategory">
						<text v-if="cateName" class="title">{{cateName}}</text>
						<text v-else class="title">选择服务</text>
						<text class="icon"></text>
					</view>
					<picker :range="sortData" @change="changeSort" :value="sortValue">
						<view class="chose-item">
							<text v-if="sortKey" class="title">{{sortData[sortKey]}}</text>
							<text v-else class="title">综合排序</text>
							<text class="icon"></text>
						</view>
					</picker>
				</view>
			</view>

			<!-- 服务商品列表 -->
			<view v-if="current === 0" class="shop-list">
				<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="goShopDetail(item)">
					<view class="img">
						<image :src="item.pic[0]" mode="aspectFill"></image>
					</view>
					<view class="item">
						<text class="title1">
							{{item.name}}
						</text>
						<text class="title2">
							{{item.price == 0?'面议':'¥' + item.price}}
						</text>
						<text class="title3">
							{{item.serviceinfo.city}}丨{{item.serviceinfo.name}}
						</text>
					</view>
				</view>
				<uni-load-more v-if="shopList.length > 0" :status="shopStatus"></uni-load-more>
				<view v-if="shopList.length === 0" class="empty-wrap">
					<image class="empty-img"
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
					<text class="tips">暂无内容</text>
				</view>
			</view>

			<!-- 服务商列表 -->
			<view v-if="current === 1" class="service-list">
				<view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="goServiceInfo(item)">
					<view class="img">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<view class="item">
						<view class="service-type">
							<text v-if="item.type == 1" class="type">官方</text>
							<text class="title1">
								{{item.name}}
							</text>
						</view>
						<text v-if="item.good_services.length > 0" class="title2">
							擅长服务：{{item.good_services.join('、')}}
						</text>
						<view style="margin-top: 16rpx;">
							<text class="cuIcon-location"></text>
							<text class="title3">
								{{item.city}}
							</text>
						</view>
					</view>
				</view>
				<uni-load-more v-if="serviceList.length > 0" :status="serviceStatus"></uni-load-more>
				<view v-if="serviceList.length === 0" class="empty-wrap">
					<image class="empty-img"
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
					<text class="tips">暂无内容</text>
				</view>
			</view>
		</scroll-view>

		<view v-if="showCityList">
			<u-popup :show="showCityList" @close="closeCityList">
				<view class="city_list">
					<choseAddr @getCityInfo="getCityInfo"></choseAddr>
				</view>
			</u-popup>
		</view>

		<!-- 服务类目 -->
		<view>
			<u-popup :show="categoryShow" closeable mode="bottom" @close="categoryShow=false" :closeOnClickOverlay="true">
				<view class="cate-title">
					<view class="title solid-bottom">
						<view class="all-cate" @click="choseAll">重置</view>
						<view class="title-chose">选择服务</view>
					</view>
					<view class="VerticalBox">
						<scroll-view class="VerticalNav" :scroll-y="true">
							<view class="cu-item" :class="index==tabCur?'first-cate cur':''" v-for="(item,index) in categoryList"
								:key="index" @tap="tabSelect(item, index)">
								{{item.name}}
							</view>
						</scroll-view>
						<scroll-view class="vertical-main" :scroll-y="true">
							<view class="right-main">
								<view class="main-item" v-for="(item, index) in cateSecondList" :key="index">
									<view class="item-title" @click="secondClick(item)">
										{{item.name}}
									</view>
									<view class="item-content">
										<view class="item-val" v-for="(val, idx) in item.third" :key="idx" @click="thirdClick(val)">
											{{val.name}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import homeApi from "@/api/home.js"
	import serviceApi from "@/api/service.js"
	import choseRegion from '@/components/chose-region/chose-region.vue'
	import choseAddr from '@/components/WF-address/WF-address.vue'
	export default {
		components: {
			choseRegion,
			choseAddr
		},
		data() {
			return {
				//顶部tab栏切换
				current: 0,
				tabList: [{
						id: 0,
						name: '服务分类'
					},
					{
						id: 1,
						name: '服务商'
					}
				],

				//省市区
				choseRegion: [],
				cityCode: '',

				//服务类目
				categoryShow: false,
				tabCur: 0,
				categoryList: [],
				cateFirstId: '',
				cateSecondId: '',
				cateSecondList: [],
				cateThirdId: '',
				cateName: '',
				cateSort: '',

				//排序
				sortValue: 0,
				sortData: ["综合排序", "官方服务商", "普通服务商", "成交量从高到低"],
				sortKey: 0,
				sortType: '',
				serviceType: '',

				//服务商品列表
				shopList: [],
				shopStatus: 'nomore',

				//服务商列表
				serviceList: [],
				serviceStatus: 'nomore',

				//分页参数
				servicePage: 1,
				servicePageSize: 10,
				shopPage: 1,
				shopPageSize: 10,
				isRefreshing: false,

				addrName: '',
				showCityList: false
			};
		},
		onLoad(e) {
			console.log(e, '目前只有一个e')
			if (e.c_id) {
				this.cateFirstId = e.c_id
				this.tabCur = e.index
				this.cateName = e.cateName
				this.cateSort = 'one'
			}
			if (e.index) {
				this.current = e.index
			}
			this.init()
		},

		methods: {
			//数据加载
			init() {
				this.getShopData()
			},

			//前往搜索界面
			goSearch() {
				if (!uni.getStorageSync("token")) {
					this.$common.noToken()
					return
				}
				uni.navigateTo({
					url: '/pagesPersonal/serviceSearch/serviceSearch'
				})
			},

			//服务商和服务商品列表切换
			tabClick(item, index) {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				this.current = index
				if (item.id === 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
			},

			//省市切换
			regionName(res) {
				console.log(res)
				this.choseRegion = res
				if (res[1].id === 1) {
					this.cityCode = ''
					if (this.current === 0) {
						this.shopPage = 1
						this.getShopData()
					} else {
						this.servicePage = 1
						this.getServiceData()
					}
				} else {
					this.cityCode = res[1].id
					if (this.current === 0) {
						this.shopPage = 1
						this.getShopData()
					} else {
						this.servicePage = 1
						this.getServiceData()
					}
				}
			},
			regionValue(res) {
				console.log(res)
			},

			//综合排序
			changeSort(e) {
				console.log(e)
				this.sortKey = e.detail.value
				if (e.detail.value == 0) {
					this.sortType = 0
					this.serviceType = ''
				} else if (e.detail.value == 1) {
					this.serviceType = 1
					this.sortType = ''
				} else if (e.detail.value == 2) {
					this.serviceType = 5
					this.sortType = ''
				} else if (e.detail.value == 3) {
					this.sortType = 1
					this.serviceType = ''
				}
				if (this.current === 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
			},

			//服务分类选择全部
			choseAll() {
				this.cateName = ''
				this.cateFirstId = ''
				this.cateSecondId = ''
				this.cateThirdId = ''
				if (this.current === 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
				this.categoryShow = false
			},

			//展示区域搜索
			showAddr() {
				this.showCityList = true
			},

			closeCityList() {
				this.showCityList = false
				this.addrName = ''
				this.cityCode = ''
				if (this.current == 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
			},

			getCityInfo(val) {
				console.log(val)
				this.cityCode = val.id
				this.addrName = val.name
				console.log(this.current)
				if (this.current == 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
				this.showCityList = false
			},

			//服务类目弹框
			showCategory() {
				this.getCategoryData()
				this.categoryShow = true
			},

			//获取服务类目
			async getCategoryData() {
				let res = await homeApi.getServiceCate()
				if (res.code === 1) {
					this.categoryList = res.data
					this.cateFirstId = res.data[0].id
					this.getSecondCate()
				} else {
					this.$common.msgShow(res.msg)
				}
			},

			//服务类目切换
			tabSelect(item, index) {
				this.tabCur = index;
				this.cateFirstId = item.id
				this.getSecondCate()
			},

			//获取二类三类服务类目
			async getSecondCate() {
				let obj = {
					c_id: this.cateFirstId
				}
				let res = await serviceApi.getServiceCateChild(obj)
				if (res.code === 1) {
					this.cateSecondList = res.data
				} else {
					this.$common.msgShow(res.msg)
				}
			},

			//二级类目点击事件
			secondClick(val) {
				this.cateThirdId = ''
				this.cateName = val.name
				this.cateSort = 'two'
				this.cateSecondId = val.id
				this.cateFirstId = val.c_id
				this.categoryShow = false
				if (this.current === 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
			},

			//三级类目点击事件
			thirdClick(val) {
				this.cateSort = 'three'
				this.cateName = val.name
				this.cateThirdId = val.id
				this.cateSecondId = val.s_id
				this.cateFirstId = val.c_id
				this.categoryShow = false
				if (this.current === 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
			},

			//服务商品列表
			async getShopData() {
				this.shopStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj = {
					cate: this.cateSort,
					city_code: this.cityCode,
					keyword: this.cateName,
					page: this.shopPage,
					pagesize: this.shopPageSize,
					sort: this.sortType,
					type: this.serviceType
				}
				let res = await serviceApi.getShopList(obj)
				if (res.code === 1) {
					let arr = []
					if (this.shopPage == 1) {
						this.shopList = []
					}
					let newList = res.data
					if (newList.length >= this.shopPageSize) {
						this.shopStatus = 'more'
					} else {
						this.shopStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							name: val.name,
							pic: val.pic.split(','),
							price: val.price,
							serviceinfo: val.serviceinfo
						}
						this.shopList.push(obj)
					})
					this.isRefreshing = false
					uni.hideLoading()
				} else {
					this.$common.msgShow(res.msg)
				}
			},

			//服务商列表
			async getServiceData() {
				this.serviceStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj = {
					one_cate_id: this.cateFirstId,
					two_cate_id: this.cateSecondId,
					third_cate_id: this.cateThirdId,
					city_code: this.cityCode,
					sort: this.sortType,
					type: this.serviceType,
					page: this.servicePage,
					pageSize: this.servicePageSize
				}
				let res = await serviceApi.getServiceList(obj)
				if (res.code === 1) {
					let arr = []
					if (this.servicePage == 1) {
						this.serviceList = []
					}
					let newList = res.data.list
					if (newList.length >= this.servicePageSize) {
						this.serviceStatus = 'more'
					} else {
						this.serviceStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							name: val.name,
							logo: val.logo,
							good_services: val.good_services,
							city: val.city,
							type: val.type
						}
						this.serviceList.push(obj)
					})
					this.isRefreshing = false
					uni.hideLoading()
				} else {
					this.$common.msgShow(res.msg)
				}
			},

			//跳转服务商品详情
			goShopDetail(item) {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.navigateTo({
					url: "/pagesShop/shopDetail/shopDetail?id=" + item.id
				})
			},

			//跳转服务商详情
			goServiceInfo(item) {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.navigateTo({
					url: '/pagesShop/serviceDetail/serviceDetail?id=' + item.id
				})
			},

			//下拉刷新
			refresherrefresh() {
				this.isRefreshing = true;
				if (this.current === 0) {
					this.shopPage = 1
					this.getShopData()
				} else {
					this.servicePage = 1
					this.getServiceData()
				}
			},

			//上拉加载
			loadMore() {
				if (this.current === 0) {
					if (this.shopStatus == 'more') {
						this.shopPage += 1
						this.getShopData()
					}
				} else {
					if (this.serviceStatus == 'more') {
						this.servicePage += 1
						this.getServiceData()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "service.scss";
</style>